'use client';
import Image from "next/image";
import MobileLayout from "../../components/layout/MobileLayout";
import styles from "./page.module.css";
import { useEffect, useState } from "react";
import { Popup, Space, Button } from 'antd-mobile'
import { useRouter } from 'next/navigation';

export default function VideoPage() {
  // 模拟视频数据
  const videos = [
    {
      id: 1,
      title: "主题乐园游玩攻略",
      author: "主题乐园助手",
      views: "10.2万",
      duration: "05:32",
      cover: "/videos/theme-park-guide.svg"
    },
    {
      id: 2,
      title: "儿童游乐设施体验",
      author: "亲子游玩",
      views: "8.5万",
      duration: "07:15",
      cover: "/videos/kids-facilities.svg"
    },
    {
      id: 3,
      title: "主题乐园美食推荐",
      author: "美食达人",
      views: "12.3万",
      duration: "06:48",
      cover: "/videos/theme-park-food.svg"
    },
    {
      id: 4,
      title: "乐园夜间表演实录",
      author: "表演爱好者",
      views: "15.7万",
      duration: "08:22",
      cover: "/videos/night-show.svg"
    },
    {
      id: 5,
      title: "主题乐园摄影技巧",
      author: "摄影师小王",
      views: "7.8万",
      duration: "04:56",
      cover: "/videos/photography-tips.svg"
    },
    {
      id: 6,
      title: "乐园VIP体验",
      author: "旅游博主",
      views: "9.4万",
      duration: "10:15",
      cover: "/videos/vip-experience.svg"
    }
  ];

  const [categories, setCategories] = useState<any>([])
  // 视频分类
  const categorie = [
    { id: 1, name: "推荐", active: true },
    { id: 2, name: "游玩攻略", active: false },
    { id: 3, name: "美食", active: false },
    { id: 4, name: "表演", active: false },
    { id: 41, name: "直播", active: false },
    { id: 5, name: "亲子", active: false },
    { id: 6, name: "VIP体验", active: false }
  ];
  const [showLiveTabs, setShowLiveTabs] = useState(false);
  const [activeLiveTab, setActiveLiveTab] = useState('live');
  const router = useRouter();

  const liveTabs = [
    { id: 'live', name: '直播' },
    { id: 'liveroom', name: '直播间' }
  ];
  useEffect(() => {
    setCategories(categorie)
  }, [])

  // 模拟直播数据
  const liveCards = [
    {
      id: 1,
      cover: '/videos/live1.jpg',
      title: '夜场直播进行中',
      anchor: '小乐',
      viewers: '2.3万'
    },
    {
      id: 2,
      cover: '/videos/live2.jpg',
      title: '花车巡游现场直播',
      anchor: '花车达人 正在大秀',
      viewers: '1.8万'
    }
  ];

  return (
    <MobileLayout>
      <div className={styles.videoPage}>
        {/* 头部搜索 */}
        <div className={styles.searchHeader}>
          <div className={styles.searchBar}>
            <div className={styles.searchIcon}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="#999"/>
              </svg>
            </div>
            <input 
              type="text" 
              className={styles.searchInput} 
              placeholder="搜索视频内容"
            />
          </div>
        </div>

        {/* 分类导航 */}
        <div className={styles.categories}>
          {categories.map((category: any) => (
            <div
              key={category.id}
              className={`${styles.categoryItem} ${category.active ? styles.active : ''}`} onClick={() => {
                setCategories(categories.map((c: any) => ({
                  ...c,
                  active: c.id === category.id
                })));
                if (category.name === '直播') {
                  setShowLiveTabs(true);
                } else {
                  setShowLiveTabs(false);
                }
              }}
            >
              {category.name}
            </div>
          ))}
        </div>

        {/* 视频列表 */}
        <div className={styles.videoGrid}>
          {videos.map(video => (
            <div key={video.id} className={styles.videoCard}>
              <div className={styles.videoCover}>
                <Image 
                  src={video.cover} 
                  alt={video.title} 
                  width={180} 
                  height={100} 
                  layout="responsive"
                />
                <div className={styles.videoDuration}>{video.duration}</div>
              </div>
              <div className={styles.videoInfo}>
                <div className={styles.videoTitle}>{video.title}</div>
                <div className={styles.videoMeta}>
                  <span className={styles.videoAuthor}>{video.author}</span>
                  <span className={styles.videoViews}>{video.views}次观看</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 直播弹层 */}
        <Popup
          visible={showLiveTabs}
          onMaskClick={() => setShowLiveTabs(false)}
          position='right'
          bodyStyle={{
            width: '80vw',
            maxWidth: 400,
            borderTopLeftRadius: 16,
            borderBottomLeftRadius: 16,
            padding: 0,
            background: '#181823'
          }}
        >
          <div style={{
            padding: '0',
            minHeight: '100vh',
            background: '#181823',
            color: '#fff',
            display: 'flex',
            flexDirection: 'column'
          }}>
            {/* 顶部标题栏 */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: '20px 20px 10px 20px',
              borderBottom: '1px solid rgba(255,255,255,0.06)'
            }}>
              <span style={{ fontWeight: 700, fontSize: 20, letterSpacing: 1 }}>直播推荐</span>
              <Button size="mini" fill="none" style={{ color: '#fff' }} onClick={() => setShowLiveTabs(false)}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M18 6L6 18" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
                  <path d="M6 6L18 18" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
                </svg>
              </Button>
            </div>
            {/* 直播卡片列表 */}
            <div style={{
              flex: 1,
              overflowY: 'auto',
              padding: '20px',
              display: 'flex',
              flexDirection: 'column',
              gap: '20px'
            }}>
              {liveCards.map(card => (
                <div key={card.id} style={{
                  display: 'flex',
                  background: 'rgba(255,255,255,0.04)',
                  borderRadius: 14,
                  overflow: 'hidden',
                  boxShadow: '0 2px 12px rgba(0,0,0,0.12)',
                  position: 'relative'
                }}>
                  {/* 封面 */}
                  <div style={{
                    flex: '0 0 110px',
                    height: 140,
                    position: 'relative',
                    background: '#222'
                  }}>
                    <Image
                      src={card.cover}
                      alt={card.title}
                      width={110}
                      height={140}
                      style={{ objectFit: 'cover', width: '100%', height: '100%' }}
                    />
                    <div style={{
                      position: 'absolute',
                      left: 8,
                      top: 8,
                      background: 'linear-gradient(90deg,#FF1767 0%,#FF5B3E 100%)',
                      color: '#fff',
                      fontSize: 12,
                      fontWeight: 600,
                      borderRadius: 6,
                      padding: '2px 10px',
                      letterSpacing: 1,
                      boxShadow: '0 2px 8px rgba(255,23,103,0.15)'
                    }}>直播中</div>
                  </div>
                  {/* 信息区 */}
                  <div style={{
                    flex: 1,
                    padding: '16px 16px 16px 14px',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between'
                  }}>
                    <div>
                      <div style={{
                        fontWeight: 700,
                        fontSize: 17,
                        marginBottom: 8,
                        lineHeight: 1.2,
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap'
                      }}>{card.title}</div>
                      <div style={{
                        fontSize: 14,
                        color: '#FF5B3E',
                        fontWeight: 500,
                        marginBottom: 6
                      }}>{card.anchor}</div>
                      <div style={{
                        fontSize: 13,
                        color: '#fff',
                        opacity: 0.7
                      }}>
                        <svg width="16" height="16" style={{verticalAlign: 'middle', marginRight: 3}} viewBox="0 0 24 24" fill="none">
                          <path d="M12 21c-4.97 0-9-3.58-9-8 0-2.22 1.06-4.22 2.82-5.67C7.58 5.06 9.78 4 12 4s4.42 1.06 6.18 3.33C21.94 8.78 23 10.78 23 13c0 4.42-4.03 8-9 8z" fill="#FF5B3E"/>
                        </svg>
                        {card.viewers} 正在看
                      </div>
                    </div>
                    <Button
                      color='primary'
                      style={{
                        marginTop: 12,
                        background: 'linear-gradient(90deg,#FF1767 0%,#FF5B3E 100%)',
                        border: 'none',
                        borderRadius: 8,
                        fontWeight: 600,
                        fontSize: 15,
                        color: '#fff',
                        width: '100%',
                        height: 36,
                        boxShadow: '0 2px 8px rgba(255,23,103,0.10)'
                      }}
                      onClick={() => router.push('/liveview?id=broadcaster')}
                    >进入直播间</Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Popup>
      </div>
    </MobileLayout>
  );
}